<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>规划路线</title>
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }

        .map {
            height: 80%;
        }
        #container {
            height: 100%;
        }
        #panel {
            position: fixed;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }
    </style>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=eae41a099604bf0ba84f3c25730e9b76&plugin=AMap.Driving"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
    <div class="map">
        <div id="container"></div>
        <div id="panel"></div>
        <div id="transfer"></div>
    </div>
    <!-- <div class="search">
        <input type="text" id="keyword" />
        <input type="submit" id="button" />
        <input type="text" name="start" id="start">
        <input type="text" name="end" id="end">
        <input type="submit" id="search">
    </div> -->
    <script type="text/javascript">
    //基本地图加载
        var map = new AMap.Map("container", {
            resizeEnable: true,
            center: [113.29555,23.012492],
            zoom: 13, //地图显示的缩放级别
        });

        // var marker = new AMap.Marker({
        //     draggable: true,
        //     position: [113.29555,23.012492],
        //     title: 'title'
        // });
        // marker.setMap(map);
        // marker.on('click', function(e){
        //     lnglatXY = e.target.getPosition();
        //     AMap.service('AMap.Geocoder', function(){
        //         geocoder = new AMap.Geocoder();

        //         geocoder.getAddress(lnglatXY, function(status, result){
        //             if(status === 'complete' && result.info === 'ok'){
        //                 console.log([status, result]);
        //             }else{
        //                 console.log([status, result]);
        //             }
        //         });
        //     });
        // });

        // var button = document.getElementById('button');
        // button.addEventListener('click', function(e){
        //     var keyword = document.getElementById('keyword').value
        //     if(keyword){
        //         AMap.service('AMap.PlaceSearch', function(){
        //             placeSearch = new AMap.PlaceSearch({
        //                 pageSize: 5,
        //                 pageIndex: 1,
        //                 city: '020',
        //                 map: map,
        //                 panel: 'panel'
        //             });
        //             placeSearch.search(keyword, function(status, result){});
        //         });
        //     }
        // });
        // AMap.plugin('AMap.Autocomplete', function(){
        //     var autoOptions = {
        //         city: '',
        //         input: 'keyword',
        //     };
        //     autocomplete = new AMap.Autocomplete(autoOptions);
        // });

        // var search = document.getElementById('search');
        // search.addEventListener('click', function(){
        //     var start = document.getElementById('start').value;
        //     var end = document.getElementById('end').value;
        //     AMap.service('AMap.Transfer', function(){
        //         transfer = new AMap.Transfer({
        //             city: '广州市',
        //             cityd: '广州市',
        //             map: map,
        //             panel: 'transfer',
        //             policy: AMap.TransferPolicy.LEAST_TIME
        //         });
        //         // transfer.search([{keyword: start}, {keyword: end}], function(status, result){
        //         //     console.log(result.plans);
        //         // });
        //         transfer.search([{keyword: '海心沙(地铁站)'}, {keyword: '保利克洛维'}], function(status, result){
        //             console.log(result);
        //         });
        //     })
        // });
        map.plugin('AMap.Geolocation', function(){
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                useNative: true,
                timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                showButton: true,        //显示定位按钮，默认：true
                buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            });
            map.addControl(geolocation);
            AMap.event.addListener(geolocation, 'complete', function(e){
                console.log(e);
            });
            geolocation.on('error', function(e){
                console.log(e);
            });
        });
    </script>
</body>
</html>